<template>
  <el-row justify="center">
    <el-col :span="16">
      <el-row justify="center">
        <el-col :span="1.5">
          <el-image
            style="width: 66px; height: 66px"
            :src="getAssetsImge('icon_jry.png')"
          ></el-image>
        </el-col>
        <el-col :span="1.5">
          <el-image
            style="width: 66px; height: 66px"
            :src="getAssetsImge('icon_jh.png')"
          ></el-image>
        </el-col>
        <el-col :span="20"
          ><h2
            style="
              font-size: 30px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #000000;
              line-height: 14px;
            "
          >
            法律监督智能比对模型
          </h2></el-col
        >
      </el-row>
      <el-row justify="start">
        <el-col
          ><h4
            style="
              width: 557px;
              height: 19px;
              font-size: 18px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #666666;
              line-height: 14px;
            "
          >
            上传两个需要比较的Excel文件，并指定要比较列，系统会自动标识
          </h4></el-col
        >
      </el-row>
      <el-row justify="center" :gutter="24">
        <el-col :span="12" :xs="24" style="padding-left: 5px; padding-right: 5px"
          ><p
            style="
              font-size: 20px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #ff7f00;
              line-height: 14px;
              margin-top: 5px;
              margin-bootom: 50px;
            "
          >
            A表
          </p>
          <el-upload
            class="upload-demo upload-box_left"
            drag
            action=""
            :auto-upload="false"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            :file-list="excelAFilelist"
            :on-change="
              (file, files) => {
                handleExcelChange(file, files, 1)
              }
            "
            :limit="1"
          >
            <el-icon class="el-icon--upload">
              <upload-filled />
            </el-icon>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <template #tip>
              <div class="el-upload__tip">只能上传 xlsx 文件，且不超过 20Mb</div>
            </template>
          </el-upload>
        </el-col>
        <el-col :span="12" :xs="24" style="padding-left: 5px; padding-right: 5px"
          ><p
            style="
              font-size: 20px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #ff7f00;
              line-height: 14px;
              margin-top: 5px;
              margin-bootom: 50px;
            "
          >
            b表
          </p>
          <el-upload
            class="upload-demo upload-box_right"
            drag
            action=""
            :auto-upload="false"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            :file-list="excelBFilelist"
            :on-change="
              (file, files) => {
                handleExcelChange(file, files, 2)
              }
            "
            :limit="1"
          >
            <el-icon class="el-icon--upload">
              <upload-filled />
            </el-icon>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <template #tip>
              <div class="el-upload__tip">只能上传 xlsx 文件，且不超过 20Mb</div>
            </template>
          </el-upload>
        </el-col>
      </el-row>
      <p style="text-align: left">比较规则</p>
      <el-form ref="dataFormRef" :model="formData" size="large" style="background: #f7f7f7">
        <el-row>
          <el-col :span="12"><h5>A表</h5></el-col>
          <el-col :span="12"><h5>B表</h5></el-col>
        </el-row>
        <!--选择比对sheet-->
        <el-row>
          <el-col :span="12">
            <el-form-item label="选择比对sheet" label-width="140px">
              <el-select
                v-model="formData.sheetA.sheetName"
                placeholder="选择A表比对sheet"
                style="width: 90%"
                clearable
                @change="
                  (val) => {
                    sheetNameChange(val, 1)
                  }
                "
              >
                <el-option v-for="item in sheetNameAList" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-select
                v-model="formData.sheetB.sheetName"
                placeholder="选择B表比对sheet"
                style="width: 90%"
                clearable
                @change="
                  (val) => {
                    sheetNameChange(val, 2)
                  }
                "
              >
                <el-option v-for="item in sheetNameBList" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!--参与比对行-->
        <el-row>
          <el-col :span="12">
            <el-form-item label="参与比对行" label-width="140px">
              <el-select
                v-model="formData.sheetA.startRow"
                placeholder="开始行"
                style="width: 20%; margin-right: 10px"
                clearable
                :value-key="formData.sheetA.startRow + ''"
              >
                >
                <el-option
                  v-for="item in rowAList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <span style="display: inline-block; width: 5%; float: right">至</span>
              <el-select
                v-model="formData.sheetA.endRow"
                placeholder="结束行"
                style="width: 20%; margin-left: 10px"
                clearable
                :value-key="formData.sheetA.endRow + ''"
              >
                <el-option
                  v-for="item in rowAList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <span style="display: inline-block; width: 15%; float: right">表头行</span>
              <el-select
                v-model="formData.sheetA.headerRow"
                placeholder="表头行"
                style="width: 23%; margin-left: 10px"
                clearable
                :value-key="formData.sheetA.headerRow + ''"
              >
                <el-option
                  v-for="item in rowAList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-select
                v-model="formData.sheetB.startRow"
                placeholder="开始行"
                style="width: 20%; margin-right: 10px"
                clearable
                :value-key="formData.sheetB.startRow + ''"
              >
                <el-option
                  v-for="item in rowBList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>

              <span style="display: inline-block; width: 5%; float: right">至</span>

              <el-select
                v-model="formData.sheetB.endRow"
                placeholder="结束行"
                style="width: 20%; margin-left: 10px"
                clearable
                :value-key="formData.sheetB.endRow + ''"
              >
                <el-option
                  v-for="item in rowBList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <span style="display: inline-block; width: 15%; float: right">表头行</span>
              <el-select
                v-model="formData.sheetB.headerRow"
                placeholder="表头行"
                style="width: 25%; margin-left: 10px"
                clearable
                :value-key="formData.sheetB.headerRow + ''"
              >
                <el-option
                  v-for="item in rowBList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!--主列（身份标识）-->
        <el-row>
          <el-col :span="12">
            <el-form-item label="主列（身份标识）" label-width="140px">
              <el-select
                v-model="formData.primaryCol[0].colNameA"
                placeholder="选择A表主列"
                style="width: 90%"
                clearable
              >
                <el-option v-for="item in colNameAList" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-select
                v-model="formData.primaryCol[0].colNameB"
                placeholder="选择B表主列"
                style="width: 90%"
                clearable
              >
                <el-option v-for="item in colNameBList" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="选择比对的列" label-width="140px">
              <el-select
                v-model="formData.compareCol[0].colNameA"
                placeholder="选择A表sheet的比对列"
                style="width: 90%"
                clearable
              >
                <el-option v-for="item in colNameAList" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-select
                v-model="formData.compareCol[0].colNameB"
                placeholder="选择B表sheet的比对列"
                style="width: 90%"
                clearable
              >
                <el-option v-for="item in colNameBList" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="padding-bottom: 10px">
          <el-col>
            <el-form-item label="选择导入内容" label-width="140px">
              <el-checkbox-group v-model="formData.exportTypeList" @change="changeexportType(val)">
                <el-checkbox label="1" checked disabled>比中结果</el-checkbox>
                <el-checkbox label="2" checked>附上对比列数据</el-checkbox>
                <el-checkbox label="3">附上A表数据</el-checkbox>
                <el-checkbox label="4">附上B表数据</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row justify="end" :gutter="10" style="margin-top: 6px">
        <el-col :span="4">
          <el-button type="primary" @click="homeReload()">刷新界面</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="exportColCompareData(1)">导出相同</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="exportColCompareData(2)">导出不同</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="exportColCompareData(3)">导出A有B无</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="exportColCompareData(4)">导出B有A无</el-button>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref, toRefs } from 'vue'
import ExcelService from '@/http/api/ExcelService'
import type { UploadFiles } from 'element-plus'
import type { ColListReq, TwoColReq, CompareSheet } from '@/http/api/types'
import { getAssetsImge } from '@/utils/getImge'

const state = reactive({
  excelAFile: undefined as any,
  excelBFile: undefined as any,
  excelAFilelist: [] as File[],
  excelBFilelist: [] as File[],
  sheetNameAList: [] as String[],
  sheetNameBList: [] as String[],
  colNameAList: [] as String[],
  rowAList: [] as String[],
  rowBList: [] as String[],
  colNameBList: [] as String[],
  colListReq: {
    fileId: '',
    sheetName: ''
  } as ColListReq,
  formData: {
    type: 0,
    sheetA: {
      excelFileId: '',
      sheetName: '',
      headerRow: null,
      startRow: null,
      endRow: null
    },
    sheetB: {
      excelFileId: '',
      sheetName: '',
      headerRow: null,
      startRow: null,
      endRow: null
    },
    primaryCol: [
      {
        colNameA: '',
        colNameB: ''
      }
    ],
    compareCol: [
      {
        colNameA: '',
        colNameB: ''
      }
    ],
    exportTypeList: []
  }
})

const {
  excelAFilelist,
  excelBFilelist,
  sheetNameAList,
  sheetNameBList,
  colListReq,
  formData,
  colNameAList,
  colNameBList,
  rowAList,
  rowBList
} = toRefs(state)

/**
 * Excel文件change事件
 *
 * @param file
 */
function handleExcelChange(file: UploadFile, files: UploadFiles, id: number) {
  console.log('number--' + (id == 1))
  const isLt20M = file.size / 1024 / 1024 < 20
  if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
    ElMessage.warning('上传Excel只能为xlsx、xls格式')
    if (1 == id) {
      state.excelAFile = undefined
      state.excelAFilelist = []
    } else if (2 == id) {
      state.excelBFile = undefined
      state.excelBFilelist = []
    }
    return false
  } else if (!isLt20M) {
    ElMessage.warning('上传文件大小不能超过 10MB!')
    return false
  }
  if (1 == id) {
    state.excelAFile = file.raw
    getSheetNameList(id, state.excelAFile)
  } else if (2 == id) {
    state.excelBFile = file.raw
    getSheetNameList(id, state.excelBFile)
  }
}

function sheetNameChange(val, id: number) {
  console.log('id----' + id + '---res' + val)
  // debugger
  if (val && val.length > 0) {
    state.colListReq.sheetName = val
    if (1 == id) {
      state.colListReq.fileId = state.formData.sheetA.excelFileId
    } else if (2 == id) {
      state.colListReq.fileId = state.formData.sheetB.excelFileId
    }
    getRowColList(id)
  } else {
    if (1 == id) {
      state.colNameAList = []
    } else if (2 == id) {
      state.colNameBList = []
    }
  }
}

function changeexportType() {
  console.log(state.formData.exportTypeList)
}

const getSheetNameList = async (id: number, file: File) => {
  const res = await ExcelService.getSheetNameList(file)
  debugger
  if (1 == id) {
    state.sheetNameAList = res.sheetNameList
    state.formData.sheetA.excelFileId = res.fileId
    state.formData.sheetA.sheetName = res.sheetNameList[0]
    state.colListReq.fileId = res.fileId
    state.colListReq.sheetName = state.formData.sheetA.sheetName
    getRowColList(id)
  } else if (2 == id) {
    state.sheetNameBList = res.sheetNameList
    state.formData.sheetB.excelFileId = res.fileId
    state.formData.sheetB.sheetName = res.sheetNameList[0]
    state.colListReq.fileId = res.fileId
    state.colListReq.sheetName = state.formData.sheetB.sheetName
    getRowColList(id)
  }
}

const getRowColList = async (id: number) => {
  const res = await ExcelService.getRowColList(state.colListReq)
  console.log('id----' + id + '---res' + JSON.stringify(res))
  if (1 == id) {
    state.colNameAList = res.cellNameList
    state.rowAList = res.rowList
    state.formData.primaryCol[0].colNameA = res.cellNameList[0]
    state.formData.compareCol[0].colNameA = res.cellNameList[0]
    state.formData.sheetA.startRow = 2
    state.formData.sheetA.endRow = res.rowList.length
    state.formData.sheetA.headerRow = 1
  } else if (2 == id) {
    state.colNameBList = res.cellNameList
    state.formData.primaryCol[0].colNameB = res.cellNameList[0]
    state.formData.compareCol[0].colNameB = res.cellNameList[0]
    state.rowBList = res.rowList
    state.formData.sheetB.startRow = 2
    state.formData.sheetB.endRow = res.rowList.length
    state.formData.sheetB.headerRow = 1
  }
}

/**
 * 导出
 */

const exportColCompareData = async (type: number) => {
  state.formData.type = type
  await ExcelService.exportColCompareData(state.formData)
}

function homeReload() {
  location.reload()
}
</script>

<style scoped>
div {
  display: block;
}

.el-row {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  box-sizing: border-box;
}

.el-col {
  padding-left: 5px;
  padding-right: 5px;
}

.el-upload.is-drag {
  display: flex;
}

.upload-box_left ::v-deep .el-upload-dragger {
  /* width: 360px; */
  height: 150px;
  /* background-color:#FF00FF; */
  background: linear-gradient(to bottom, #fef1ec, #ffece4);
  clip-path: polygon(0% 0%, 100% 0%, 92% 100%, 0% 100%);
}

.upload-box_right ::v-deep .el-upload-dragger {
  /* width: 360px; */
  height: 150px;
  /* background-color:#FF00FF; */
  background: linear-gradient(to bottom, #c7e0ff, #e8f1ff);
  clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.el-upload__tip {
  font-size: 16px;
  margin-top: 20px;
}

.el-form-item {
  display: flex;
  margin-bottom: 22px;
}

.el-upload-dragger .el-upload__text {
  font-size: 16px;
  text-align: center;
}

.el-upload-dragger .el-icon-upload {
  font-size: 67px;
  color: var(--el-text-color-placeholder);
  margin: 40px 0 16px;
  line-height: 50px;
}

.el-button {
  display: inline-block;
  line-height: 1;
  min-height: 40px;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  font-weight: var(--el-button-font-weight);
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px;
  font-size: var(--el-font-size-base, 14px);
  border-radius: var(--el-border-radius-base);
}
</style>
